import React, { Component } from 'react'
import {
    View,
    StyleSheet,
    Image,
    Text,
    ScrollView,
    Keyboard,
    Platform,
    KeyboardAvoidingView,
    TouchableWithoutFeedback,
} from 'react-native'

import NavBar from '../../../components/PublicHeader';
import BottomFunctionBar from '../../../components/BottomFunctionBar'
import Chat from '../../Chat/Chat'
import { Actions } from 'react-native-router-flux'

export default class messagePage extends Component {
    constructor(props) {
        super(props)
        this.state = {
            // 头部右边添加好友
            headerRightImage: require("../../../assets/images/headerIcon/more.png"),
            // 消息列表数据 聊天对象
            // userDatas: [data],
            // Groupchat: Groupchat,
            // Judgegroupchat: Judgegroupchat,

            // 自己本人
            contactUserDatas: [
                {
                    // 用户头像
                    headPortrait: require("../../../assets/images/iconResources/unsplash_mhlgSvuo.png"),
                    // 消息内容
                    meesage: "你可以给我一些帮助嘛？你可以给我一些帮助嘛？",
                },
                {
                    headPortrait: require("../../../assets/images/iconResources/unsplash_mhlgSvuo.png"),
                    meesage: "社区门口超市进行大促销，快来囤货啦！价格实惠，买到就是赚到。冲！！！",
                },
                {
                    headPortrait: require("../../../assets/images/iconResources/unsplash_mhlgSvuo.png"),
                    meesage: "社区门口超市进行大促销，快来囤货啦！价格实惠，买到就是赚到。冲！！！",
                },
                {
                    headPortrait: require("../../../assets/images/iconResources/unsplash_mhlgSvuo.png"),
                    meesage: "社区门口超市进行大促销，快来囤货啦！价格实惠，买到就是赚到。冲！！！",
                },
                {
                    headPortrait: require("../../../assets/images/iconResources/unsplash_mhlgSvuo.png"),
                    meesage: "社区门口超市进行大促销，快来囤货啦！价格实惠，买到就是赚到。冲！！！",
                },
            ],
        };
    }

    componentDidMount = () => { }

    Chatsettings = () => {
        console.log(555)
        Actions.push('settings', { user: this.props.linkman == undefined ? this.props.user : this.props.linkman })
    }
    render() {
        const {
            Groupchat,
            userDatas,
            Judgegroupchat,
            headerRightImage,
            contactUserDatas,
        } = this.state
        const {
            data
        } = this.props.navigation.state.params
        return (
            // 点击输入框顶起效果
            <KeyboardAvoidingView
                style={styles.container}
                behavior="padding"
            >
                <View style={styles.padlrWarper}>
                    {/* 导航栏 */}
                    <NavBar
                        navigation={this.props.navigation}
                        rightImage={headerRightImage}
                        titleColor={"#333"}
                        title={this.props.title}
                        pressRight={() => {
                            this.Chatsettings()
                        }}
                    />
                    <Chat />

                    {/* 消息列表 */}
                    {/* <ScrollView>
                        <KeyboardAvoidingView
                            behavior={Platform.OS == "ios" ?
                                "padding" : "height"}
                            enabled
                        >
                            <TouchableWithoutFeedback
                                onPress={Keyboard.dismiss}>
                                <View style={styles.padlr}>
                                    {userDatas.map((item, index) => (
                                        // 聊天对象
                                        <View style={styles.ItemBoxLeft}
                                            key={index}>
                                            <Image style={styles.SystemPromptLeft}
                                                source={item.headPortrait} />
                                            <Text style={styles.news}>
                                                {item.messagesParty}
                                            </Text>
                                        </View>
                                    ))}
                                    {contactUserDatas.map((item, index) => (
                                        // 自己本人
                                        <View style={styles.ItemBoxRight}
                                            key={index}>
                                            <Text style={styles.news}>
                                                {item.meesage}
                                            </Text>
                                            <Image style={styles.SystemPromptRight}
                                                source={item.headPortrait} />
                                        </View>
                                    ))}
                                </View>
                            </TouchableWithoutFeedback>
                        </KeyboardAvoidingView>
                    </ScrollView> */}
                    {/* 功能区 */}
                    {/* <BottomFunctionBar
                        meesagePagethis={this}
                    /> */}
                </View>
            </KeyboardAvoidingView>
        )
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    padlrWarper: {
        backgroundColor: "rgb(245,245,245)",
        flex: 1,
    },
    padlr: {
        paddingLeft: 15,
        paddingRight: 15,
        marginBottom: 80
    },

    ItemBoxLeft: {
        marginTop: 30,
        flexDirection: "row",
        justifyContent: "flex-start"
    },
    ItemBoxRight: {
        marginTop: 30,
        flexDirection: "row",
        justifyContent: "flex-end"
    },
    SystemPromptLeft: {
        width: 45,
        height: 45,
        marginRight: 15
    },
    SystemPromptRight: {
        width: 45,
        height: 45,
        marginLeft: 15
    },

    news: {
        width: 250,
        fontSize: 15,
        color: "#333",
        padding: 10,
        backgroundColor: "#fff",
        borderRadius: 10
    },

})